import { ProForm, ProFormList, ProFormGroup, ProFormText, ProFormSelect } from '@ant-design/pro-components';
import { CloseCircleOutlined, SmileOutlined } from '@ant-design/icons';
import { useRef } from 'react';
// import { Button, Segmented } from 'antd';
// import { AbandonUndefine } from '@/utils/type-util';

const JudgeNode: React.ComponentType<NodeSetting.Setting<NodeSetting.JudgeNode>> = (props) => {
  const formRef = useRef();
  const onFormFinish = (formData: Record<string, any>) => {
    const nodeSelectList: NodeSetting.JudgeNode = formData as NodeSetting.JudgeNode
    props?.updateSetting!(nodeSelectList)
    props.messageTip('暂存成功', 'success')
  }
  // 自动存放值
  const onChange = async () => {
    const values = await ((formRef.current) as any).getFieldsValue();
    const nodeSelectList: NodeSetting.JudgeNode = values as NodeSetting.JudgeNode
    props?.updateSetting!(nodeSelectList)
  }
  return (<div>
    <ProForm
      formRef={formRef}
      onFinish={async (formData) => onFormFinish(formData)}
      onChange={onChange}
    >
      <ProFormText name="name" label="名字" />
      <ProFormList name="params"
        label="用户信息"
        initialValue={props.setting.nodeSelectList}
        copyIconProps={{ Icon: SmileOutlined, tooltipText: '复制此项到末尾' }}
        deleteIconProps={{
          Icon: CloseCircleOutlined,
          tooltipText: '不需要这行了',
        }}
      >
        <ProFormGroup key="group">
          <ProFormText name="name" label="名称" />
          <ProFormText name="left" label="左值" />
          {/* <ProFormText name="type" label="类型" /> */}
          <ProFormSelect
            name="op"
            width="md"
            label="操作类型"
            // dependencies={['name']}
            // {"=", "in", "contains", "else"}
            options={[
              { label: "等于", value: '=' },
              { label: '在...中', value: 'in' },
              { label: '包含', value: 'contains' },
              { label: '其他', value: 'else' },
            ]}
          />
          <ProFormText name="right" label="右值" />
          {/* <ProFormText name="next" label="下一节点" /> */}
          <ProFormSelect
            name="next"
            width="md"
            label="下一节点"
            options={props?.candidates?.map(item => {
              return { label: item, value: item }
            })}
          />
        </ProFormGroup>
      </ProFormList>
    </ProForm>
  </div>)
}
export default JudgeNode;
